<template>
  <div>
    <!--头部+banner-->
    <div class="a-1">
      <!--顶部导航-->
      <div class="a-2">
        <div class="a-3">
          <Header v-bind:state="2"></Header>
        </div>
      </div>
      <!--banner-->

      <div class="target a-9" id="target-2">
        <el-carousel class="lunbo-box-item" indicator-position="none" height="600px">
          <el-carousel-item v-for="(item,index) in abc_img" :key="index">
            <img :src="item.src" class="lunbotu" alt="轮播图" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- <div class="target a-9" id="target-2">
        <div>
          <div>
            <img src="@/assets/image/banner1.png" />
          </div>
          <div>
            <img src="@/assets/image/banner2.png" />
          </div>
          <div>
            <img src="@/assets/image/banner3.png" />
          </div>
        </div>
      </div>-->
      <!--搜索-->
      <div class="a-10">
        <form class="a-11">
          <input class="a-12" v-model="inputText" type="text" placeholder="请输入关键字" />
          <button type="button" class="a-13" @click="searchButton">
            <img src="@/assets/image/index-26.png" />
          </button>
        </form>
      </div>
      <!--消息通知-->
      <div class="a-14">
        <div class="a-15">
          <img class="a-16" src="@/assets/image/tz.png" />
          <div class="a-17">
            <div class="swiper-container swiper-containerOne">
              <div class="swiper-wrapper clearfix">
                <div class="swiper-slide" v-for="(item,index) in noticeList" :key="index">
                  <a href="javascipt:;">{{item.noticeContent}}</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--内容-->
    <div class="b-6">
      <div class="b-7">
        <!--路由-->
        <div class="b-8">
          <div class="b-9">
            当前位置：
            <a href="javascript:;">首页</a> >
            <a href="javascript:;">版权交易</a>
          </div>
        </div>
        <!--筛选-->
        <div class="b-10">
          <div class="b-11">
            <div class="b-12">
              <label class="b-13">交易类型：</label>
              <label class="b-14">
                <input name="transaction" type="radio" v-model="trading_type"   value="null" @click="editTradingType(null)" />全部
              </label>
              <label class="b-14">
                <input name="transaction" type="radio" value @click="editTradingType(1)" />项目挂牌
              </label>
              <label class="b-14">
                <input name="transaction" type="radio" value @click="editTradingType(0)" />作品挂牌
              </label>
            </div>
            <div class="b-12">
              <label class="b-13">许&emsp;&emsp;可：</label>
              <label class="b-14">
                <input name="permit" type="radio" v-model="allow_type"   value="null"  @click="eidtAllowType(null)" />全部
              </label>
              <label class="b-14">
                <input name="permit" type="radio" value @click="eidtAllowType(0)" />专有许可
              </label>
              <label class="b-14">
                <input name="permit" type="radio" value @click="eidtAllowType(1)" />非专有许可
              </label>
            </div>
            <div class="b-12" style="margin-right:0">
              <label class="b-13">转让类型：</label>
              <label class="b-14">
                <input name="assignment" type="radio" value @click="editEmpowerType(0)" />部分转让
              </label>
              <label class="b-14">
                <input name="assignment" type="radio" value @click="editEmpowerType(1)" />全部转让
              </label>
            </div>
          </div>
          <div class="b-15" v-if="trading_type==1">
            <label class="b-13 b-17">类&emsp;&emsp;型：</label>
            <ul class="b-16">
              <li @click="getproject(null)" :class="project_type==null?'active':''">
                <a href="javascript:;">全部</a>
              </li>
              <li
                :class="project_type==item.dictCode?'active':''"
                v-for="(item) in projectTypeOptions"
                :key="item.dictCode"
                @click="getproject(item.dictCode)"
              >
                <a
                  class="p5 atext"
                  style="word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis"
                  :title="item.dictLabel"
                >{{item.dictLabel}}</a>
              </li>
            </ul>
          </div>
          <div class="b-15" v-if="trading_type==0">
            <label class="b-13 b-17">类&emsp;&emsp;型：</label>
            <ul class="b-16">
              <li @click="getworks(null)" :class="works_type==null?'active':''">
                <a href="javascript:;">全部</a>
              </li>
              <li
                :class="works_type==item.dictCode?'active':''"
                v-for="(item) in worksTypeOptions"
                :key="item.dictCode"
                @click="getworks(item.dictCode)"
              >
                <a
                  class="p5 atext"
                  style="word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis"
                  :title="item.dictLabel"
                >{{item.dictLabel}}</a>
              </li>
            </ul>
          </div>
        </div>
        <!--作品列表-->
        <div class="b-18">
          <div class="b-19">
            <ul class="a-25 b-20">
              <li v-for="item in productList" :key="item.product_id">
                <a href="javascript:;" @click="ClickProduct(item.product_id, item.empower_type)">
                  <div class="a-26">
                    <img class="a-27" :src="item.cover_image" />
                    <div class="a-28">
                      <span>{{item.empower_type==0?'部分转让':'全部转让'}}</span>
                    </div>
                  </div>
                  <div class="a-29">{{item.product_name}}</div>
                  <div class="a-30">交易类型：{{item.trading_type==0?'作品挂牌':'项目挂牌'}}</div>
                  <div
                    class="a-30"
                  >作品类型：{{item.trading_type==0?worksTypeFormat(item):projectTypeFormat(item)}}</div>
                  <div class="a-31">
                    <div class="a-32">
                      ￥
                      <span>{{item.price_type==0?item.price/100:'面议'}}</span>
                    </div>
                    <div class="a-33">
                      <span class="a-34">
                        <img src="@/assets/image/fa-eye.png" />
                        <span>{{item.see_num}}</span>
                      </span>
                      <span class="a-34">
                        <img src="@/assets/image/index-25.png" />
                        <span>{{$moment(item.putaway_time).format('YYYY-MM-DD HH:mm')}}</span>
                      </span>
                    </div>
                  </div>
                </a>
              </li>
            </ul>
            <div class="a-35 h-48">
              <mo-paging
                :page-index="currentPage"
                :total="totalPage"
                :page-size="pageSize"
                @change="pageChange"
              ></mo-paging>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { productList } from "@/api/product";
import MoPaging from "@/views/Page";
import Header from "@/views/header.vue";
export default {
  components: {
    Header,
    MoPaging,
  },
  name: "index",
  data() {
    return {
      abc_img: [
        { src: require("../../assets/image/banner1.png") },
        { src: require("../../assets/image/banner2.png") },
        { src: require("../../assets/image/banner3.png") },
      ],
      noticeList: Array, //轮播
      trading_type: null, //挂牌类型
      allow_type: null, //许可类型
      empower_type: null, //转让是否全部

      inputText: null, //输入框的内容

      projectTypeOptions: [], //项目分类字典
      worksTypeOptions: [], //作品分类字典

      pageSize: 10, //每页显示20条数据
      totalPage: 1, //总记录数
      currentPage: 1, //作品与项目挂牌当前页码

      productList: [], //产品集合
      project_type: null, //项目类型
      works_type: null, //作品类型
    };
  },
  created() {
    if (this.$route.query.search) {
      this.inputText = this.$route.query.search;
    }
    this.noticeList = JSON.parse(window.sessionStorage.getItem("lb"));
    this.getProductList();
    this.getDicts("project_type").then((response) => {
      this.projectTypeOptions = response.data;
      console.log(response.data);
    });
    this.getDicts("works_type").then((response) => {
      this.worksTypeOptions = response.data;
    });
  },
  methods: {
    getproject(e) {
      this.project_type = e;
    },
    getworks(e) {
      console.log(e);
      this.works_type = e;
    },
    // 下一页
    pageChange(e) {
      this.currentPage = e;
      this.getTradeNewsList();
    },
    //点击挂牌类型
    editTradingType(e) {
      
      if (e == 2) {
        this.trading_type = null;
      } else {
        this.trading_type = e;
      }

      this.project_type = null;
      this.works_type = null;
      this.searchButton();
    },

    //点击许可类型
    eidtAllowType(e) {
      this.allow_type = e;

      this.searchButton();
    },

    //授权类型
    editEmpowerType(e) {
      this.empower_type = e;
      this.searchButton();
    }, //点击转让是否全部
    //字典
    projectTypeFormat(row) {
      return this.selectDictLabel(this.projectTypeOptions, row.project_type);
    },
    worksTypeFormat(row) {
      return this.selectDictLabel(this.worksTypeOptions, row.works_type);
    },
    getProductList() {
      //查询按钮
      //   allow_type 0 专有类型 1非专有
      //empower_type  授权类型
      //product_name 输入内容搜索
      // trading_type 挂牌类型
      let data = {
        permission_type: this.allow_type,
        empower_type: this.empower_type,
        product_name: this.inputText,
        trading_type: this.trading_type,
        works_type: this.works_type,
        project_type: this.project_type,
        currentPage: this.currentPage,
      };
      productList(data).then((response) => {
        console.log(response);
        this.productList = response.data.productList;
        this.totalPage = response.data.totalPage;
        this.currentPage = response.data.currentPage;
      });
    },
    searchButton() {
      //点击搜索按钮
      if(!this.inputText){this.$message.error("请输入关键字");return false};
      this.currentPage = 1;
      this.getProductList();
    },
    // 点击作品
    ClickProduct(id, Type) {
      console.log(id, Type);
      let _this = this;
      _this.$router.push({
        name: "showWorks",
        query: {
          product: id,
        },
      });
    },
  },
};
</script>

<style scoped>
.p5 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 80px;
  cursor: pointer;
  word-break: keep-all;
  display: inline-block;
}
／/*不换行，超出部分隐藏且以省略号形式出现*/
    .p5:hover {
  overflow: visible;
}
@import "../../css/index.css";
@import "../../css/idangerous.swiper.css";
@import "../../css/list_works.css";
</style>
